<template>
  <div class="activityBox">
    <el-row class="headFixed">
      <el-col :span="3" :offset="21">
        <el-button type="primary" @click="submitSave('over')">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-col>
    </el-row>
    <!-- 基本信息 -->
    <basic ref="superiorForm" :basic-form="basicForm"/>
    <!-- 活动商品明细 -->
    <detail :activity-id="activityId" :kind="kind" @save="submitSave('')"/>
    <!-- 活动图片 -->
    <pictures :activity-id="activityId" @save="submitSave('')"/>
    <!-- 活动描述 -->
    <div class="describeBox">活动描述</div>
    <div style="margin-bottom:20px;">
      <tinymce :height="250" :show="true" v-model="description"/>
    </div>
    <el-row class="headFixed">
      <el-col :span="3" :offset="21">
        <el-button type="primary" @click="submitSave('over')">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// 富文本编辑器
import Tinymce from '@/components/Tinymce'
import Basic from './userSetting/basicInfo'
import Detail from './userSetting/activityDetail'
import Pictures from './userSetting/activityPicture'
import { getTenantId, getUserName } from '@/utils/auth'
import { addOrUpdateActivity } from '@/api/tinysale/addActivity'
export default {
  components: {
    Basic,
    Detail,
    Pictures,
    Tinymce
  },
  data() {
    return {
      basicForm: {},
      description: '',
      activityId: '',
      kind: ''
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      if (this.$route.params.id) {
        this.basicForm = this.$route.params;
        this.description = this.$route.params.description;
        this.activityId = this.$route.params.id.toString()
      }
      this.kind = this.$route.params.kind
    },
    submitSave(val) {
      // 活动课程明细
      console.log(1111111);
      console.log(val);
      console.log(this.activityId);
      if (val === '' && this.activityId) {

        return
      }
      this.$refs.superiorForm.$refs.basicForm.validate((valid) => {
        console.log(222222);
        if (valid) {
          this.basicForm.description = this.description;
          if (!this.basicForm.id) {
            this.basicForm.kind = this.kind;
            this.basicForm.creator = getUserName();
            this.basicForm.tenantId = getTenantId()
          }
          addOrUpdateActivity(this.basicForm).then(res => {
            this.activityId = res.data.id;
            this.basicForm.id = res.data.id;
            if (val === 'over') {
              this.cancel();
              this.$notify({
                title: '成功',
                message: '成功',
                type: 'success',
                duration: 2000
              })
            }
          })
        } else {
          console.log('error submit!!');
          return false
        }
      })
    },
    cancel() {
      this.$router.push({ name: 'SeckillSet', params: { kind: this.kind }})
    }
  }
}
</script>
<style lang="scss" scoped>
.activityBox {
  padding: 0 20px;
  .headFixed {
    margin-top: 10px;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #e6e9ed;
  }
}
.describeBox {
  color: rgb(52, 172, 228);
  padding: 10px 30px;
  background: #ebfcf9;
  margin: 20px 0;
  overflow: hidden;
}
</style>

